<template>
  <el-container class="main_con">
    <div class="gift_body">
      <div class="left">
        <div class="app_div">
          <div class="app_main">
            <div class="div_bg">
              <div class="phone-title goods">
                <div class="phone-top">
                  <div
                    class="custom-navbar"
                    style="width:100%; height: 64px; background: rgb(255, 255, 255);"
                  >
                    <img
                      src=""
                      alt=""
                      style="width:100%; height: 20px; position: absolute; top: 0px; left: 0px; z-index: 100;"
                    />
                    <img
                      src=""
                      alt=""
                    />
                  </div>
                </div>
                <p class="page-title" style="color: rgb(33, 33, 33);">
                  刮刮卡抽奖
                </p>
              </div>
              <vimage
                class="bg_img"
                v-if="form.other.prize_bg_img"
                :src="form.other.prize_bg_img"
             ></vimage
>
              <img class="bg_img" v-else src="@/assets/images/scratch_bg.png" />
              <!--  <img
              class="bg_t"
              style="bottom: 0px"
              src="@/assets/images/scratch_img.png"
              alt=""
            /> -->
            </div>
            <div
              class="div_content1"
              :style="'top:' + (form.other.box_top + 80) + 'px'"
            >
              <div style="height: 1px"></div>
              <div class="content">
                <div class="title" :style="prizeColor">
                  恭喜 187****8888 获得刮刮乐奖品8元代金券
                </div>
                <div class="scratch">
                  <div class="txt">刮刮卡一张</div>
                  <div class="compinents">
                    <div class="compinents_bg">刮奖区</div>
                  </div>
                </div>
                <div class="l_title">今日免费次数：5次</div>
                <div class="btn">
                  <vimage
                    v-if="form.other.prize_btn_img"
                    :src="form.other.prize_btn_img"
                  ></vimage
>
                  <img v-else src="@/assets/images/scratch_btn.png" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <el-form
          ref="formRules"
          :model="form"
          label-width="130px"
          class="form_box"
          :rules="formRules"
        >
          <el-tabs v-model="activeName">
            <el-tab-pane label="奖品设置" name="1">
              <div class="box_ove">
                <el-tabs
                  type="border-card"
                  tab-position="left"
                  :stretch="false"
                  v-model="prize_index"
                  :before-leave="beforeLeave"
                >
                  <el-tab-pane v-for="(item, i) in form.config" :key="i">
                    <div slot="label" style="display: flex">
                      <span
                        style="width: 70px; display: black; text-align: center"
                        >奖品{{ prize_name(i + 1) }}</span
                      >
                      <span
                        style="width: 30px; display: black; text-align: center"
                        >{{ item.probability }}%</span
                      >
                      <span
                        ><i class="el-icon-close" @click="removeItem(i)"></i
                      ></span>
                    </div>
                    <el-form-item label="奖品选择" label-width="80px">
                      <el-radio-group v-model="item.type">
                        <el-radio :label="1">谢谢参与</el-radio>
                        <el-radio v-if="is_deduction" :label="2">积分</el-radio>
                        <el-radio :label="3">余额红包</el-radio>
                        <el-radio :label="4">商品</el-radio>
                        <el-radio v-if="is_coupon" :label="5">优惠券</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item
                      label-width="80px"
                      :rules="formRules.prize_name"
                      :prop="'config[' + i + '].name'"
                    >
                      <span slot="label">奖品名称</span>
                      <el-input
                        :max="8"
                        placeholder="请输入奖品名称"
                        v-model="item.name"
                        style="width: 200px"
                        maxlength="12"
                        show-word-limit
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label-width="80px"
                      :rules="formRules.image"
                      :prop="'config[' + i + '].image'"
                    >
                      <span slot="label">奖品图片</span>
                      <div class="prize_img">
                        <Upload
                          :tempUrl="item.image"
                          @input="getPrizeImg"
                        ></Upload>
                      </div>
                    </el-form-item>
                    <div v-if="item.type == 2">
                      <el-form-item label-width="80px">
                        <span slot="label">积分额</span>
                        <el-input-number
                          v-model="item.value"
                          :step="1"
                          step-strictly
                          :max="100"
                          size="small"
                          :min="0"
                          :controls="false"
                        ></el-input-number>
                        分
                      </el-form-item>
                    </div>
                    <div v-if="item.type == 3">
                      <el-form-item label-width="80px">
                        <span slot="label">红包金额</span>
                        <el-input-number
                          v-model="item.value"
                          :step="0.1"
                          step-strictly
                          :max="100"
                          size="small"
                          :min="0"
                          :controls="false"
                        ></el-input-number>
                        元
                      </el-form-item>
                    </div>
                    <div v-if="item.type == 4">
                      <el-form-item label-width="80px">
                        <span slot="label">商品</span>
                        <el-button @click="toSelectPro(i)"
                          >选择商品</el-button
                        >
                        <el-table
                          :data="item.valuelist"
                          stripe
                          style="width: 100%; margin-top: 15px"
                        >
                          <el-table-column prop="name" label="商品" width="180">
                            <template slot-scope="scope">
                              <div class="product-item">
                                <vimage :src="scope.row.master" ></vimage>
                                <span>{{ scope.row.name }}</span>
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column
                            prop="original_price"
                            label="销售价（元）"
                            width="180"
                          ></el-table-column>
                          <el-table-column
                            prop="sell_price"
                            label="划线价（元）"
                          ></el-table-column>
                          <el-table-column
                            prop="address"
                            label="规格"
                          ></el-table-column>
                          <el-table-column
                            prop="total"
                            label="库存"
                          ></el-table-column>
                        </el-table>
                      </el-form-item>
                      <el-form-item
                        label-width="80px"
                        v-if="item.type !== 1"
                        prop="number"
                      >
                        <span slot="label">商品个数</span>
                        <el-input-number
                          v-model="item.number"
                          :step="1"
                          size="small"
                          :min="0"
                          step-strictly
                        ></el-input-number>
                      </el-form-item>
                    </div>
                    <div v-if="item.type == 5">
                      <el-form-item label-width="80px">
                        <span slot="label">优惠券</span>
                        <el-button @click="toSelectCon(i)"
                          >添加</el-button
                        >
                        <el-table
                          :data="item.valuelist"
                          stripe
                          style="width: 100%; margin-top: 15px"
                        >
                          <el-table-column
                            prop="name"
                            label="优惠卷"
                            width="180"
                          ></el-table-column>
                          <el-table-column
                            prop="conditions"
                            label="满"
                            width="180"
                          ></el-table-column>
                          <el-table-column
                            prop="denomination"
                            label="减"
                            width="180"
                          ></el-table-column>
                          <el-table-column
                            prop="total_limit"
                            label="库存"
                          ></el-table-column>
                        </el-table>
                      </el-form-item>
                    </div>
                    <el-form-item
                      label-width="80px"
                      v-if="item.type !== 1"
                      prop="number"
                    >
                      <span slot="label">库存</span>
                      <el-input-number
                        v-model="item.limit"
                        :step="1"
                        size="small"
                        :min="0"
                        step-strictly
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item label-width="80px">
                      <span slot="label">概率</span>
                      <el-input-number
                        v-model="item.probability"
                        :step="0.1"
                        step-strictly
                        :max="100"
                        size="small"
                        :min="0"
                      ></el-input-number>
                      %
                    </el-form-item>
                  </el-tab-pane>
                  <el-tab-pane key="add" name="add"
                    ><div
                      slot="label"
                      style="text-align: center; font-size: 14px"
                    >
                      添加奖品 +
                    </div></el-tab-pane
                  >
                </el-tabs>
              </div>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="2">
              <div class="box_ove">
                <el-collapse v-model="activeName1">
                  <el-collapse-item title="背景样式" name="c1">
                    <el-form-item label-width="100px">
                      <span slot="label">抽奖页面背景</span>
                      <div class="prize_img">
                        <Upload
                          :tempUrl="form.other.prize_bg_img"
                          @input="getPrizeBgImg"
                        ></Upload>
                      </div>
                    </el-form-item>
                  </el-collapse-item>
                  <el-collapse-item title="文字样式" name="c2">
                    <el-form-item label-width="100px">
                      <span slot="label">文字颜色</span>
                      <ColorPicker
                        :color="form.other"
                        :name="'btn_color'"
                      ></ColorPicker>
                    </el-form-item>
                  </el-collapse-item>
                  <el-collapse-item title="抽奖区样式" name="c3">
                    <el-form-item label="">
                      <span slot="label">抽奖区位置</span>
                      <div class="block">
                        <el-slider
                          v-model="form.other.box_top"
                          :min="0"
                          :max="600"
                        ></el-slider>
                      </div>
                    </el-form-item>
                  </el-collapse-item>
                  <el-collapse-item title="按钮样式" name="c3">
                    <el-form-item label-width="100px">
                      <span slot="label">按钮图片</span>
                      <div class="prize_img">
                        <Upload
                          :tempUrl="form.other.prize_btn_img"
                          @input="getPrizeBtnImg"
                        ></Upload>
                      </div>
                    </el-form-item>
                  </el-collapse-item>
                  <el-collapse-item title="前景样式" name="c3">
                    <el-form-item label-width="100px">
                      <span slot="label">前景图片</span>
                      <div class="prize_img">
                        <Upload
                          :tempUrl="form.other.prize_foreg_img"
                          @input="getPrizeForegImg"
                        ></Upload>
                      </div>
                    </el-form-item>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-tab-pane>
            <el-tab-pane label="活动规则" name="3">
              <div class="box_ove">
                <el-form-item label-width="80px">
                  <span slot="label">活动规则</span>

                    <tinymce v-model="form.other.text" :height="400" />
                </el-form-item>
              </div>
            </el-tab-pane>
            <el-tab-pane label="基本设置" name="4">
              <div class="box_ove">
                <el-form-item label-width="110px" prop="name">
                  <span slot="label">抽奖活动名称</span>
                  <el-input
                    type="text"
                    placeholder="请输入内容"
                    v-model="form.name"
                    maxlength="10"
                    show-word-limit
                    style="width: 200px"
                  ></el-input>
                </el-form-item>
                <el-form-item label-width="110px">
                  <span slot="label">抽奖时间</span>
                  <el-date-picker
                    v-model="prize_time"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['12:00:00']"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label-width="110px">
                  <span slot="label">抽奖规则</span>
                  <el-radio-group v-model="form.type">
                    <el-radio :label="1">一天次数</el-radio>
                    <el-radio :label="2">一人次数</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label-width="110px">
                  <span slot="label">抽奖上限次数</span>
                  <el-input-number
                    v-model="form.limit"
                    :step="1"
                    step-strictly
                    size="small"
                    :min="0"
                  ></el-input-number>
                  次
                </el-form-item>
                <el-form-item label-width="110px">
                  <span slot="label">抽奖初始次数</span>
                  <el-input-number
                    v-model="form.number"
                    :step="1"
                    step-strictly
                    size="small"
                    :min="0"
                  ></el-input-number>
                  次
                </el-form-item>
                <el-form-item label-width="110px">
                  <span slot="label">抽奖消耗积分</span>
                  <el-input-number
                    v-model="form.integral"
                    :step="1"
                    step-strictly
                    size="small"
                    :min="0"
                  ></el-input-number>
                  分
                </el-form-item>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form>
        <div class="form_button">
          <el-button @click="addPrize" type='primary'  size="medium">保存数据</el-button>
          <!-- <el-button>重置</el-button> -->
        </div>
      </div>
    </div>
    <el-dialog
      title="选择商品"
      :visible.sync="showSelectPro"
      width="50%"
      append-to-body
    >
      <SelectProduct
        :key="rk"
        :data="selectPro"
        :limit="1"
        @outData="closePro"
        ref="selectproduct"
      ></SelectProduct>
    </el-dialog>
    <el-dialog
      title="选择优惠券"
      :visible.sync="showSelectCon"
      width="50%"
      append-to-body
    >
      <SelectConpon
        :key="rke"
        :data="selectCon"
        @outData="closeCon"
        ref="selectCon"
      ></SelectConpon>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  addLottery,
  getLotteryContent,
  editLotteryContent
} from "@/api/mall/prize";
import { getLotteryConfig } from "@/api/mall/setting";
import Upload from "@/components/Upload/SingleImage2";
import SelectProduct from "@/components/SelectProduct/index";
import SelectConpon from "@/components/SelectConpon/index";
import ColorPicker from "@/components/ColorPicker/index";
import Tinymce from '@/components/Tinymce';
import {jur_addons_item, jur_addons} from '@/utils/jurisdiction';
export default {
  data() {
    var changeInput = (rule, value, callback) => {
      let pattern = /^[1-9][0-9]*$/; // 正整数的正则表达式
      // 不符合正整数时
      console.log(rule, value);
      if (!pattern.test(value)) {
        // input 框绑定的内容为空
        callback(new Error("请输入正整数"));
      } else {
        callback();
      }
    };
    return {
      activeName1: ["c1", "c2", "c3", "c4"],
      prize_index: "0",
      prize_time: "",
      id: "",
      form: {
        config: [
          {
            name: "",
            image: "",
            probability: 5,
            type: 1,
            value: "",
            valuelist: [],
            number: 1,
            limit: 0
          }
        ],
        type: 1,
        start_time: "",
        end_time: "",
        integral: 10,
        limit: 1,
        number: 1,
        prize_name: "",
        style: 2,

        other: {
          text: "",
          prize_bg_img: "",
          prize_btn_img: "",
          prize_foreg_img: "",
          btn_color: "#000",
          box_top: 190
        }
      },
      formRules: {
        name: [
          {
            required: true,
            message: "请输入活动名称",
            trigger: "blur"
          }
        ],
        prize_name: [
          {
            required: true,
            message: "请输入奖品名称",
            trigger: "blur"
          }
        ],
        image: [
          {
            required: true,
            message: "请上传奖品图片",
            trigger: "blur"
          }
        ]
      },
      valueRules: { validator: changeInput, trigger: "blur" },
      numberRules: { validator: changeInput, trigger: "blur" },

      showSelectPro: false,
      showSelectCon: false,
      selectPro: [],
      selectCon: [],
      activeName: "1",
      rk: 0,
      rke: 0,
      data: [],

      setting: {},
      is_coupon:false,
      is_deduction:false
    };
  },
  created() {
    jur_addons([7, 3]).then(res => {
      if (res[3]) {
        this.is_coupon = true;
      }

      if (res[7]) {
        this.is_deduction = true;

      }
    });
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getLottery(this.id);
    }
  },

  components: {
    Upload,
    SelectProduct,
    SelectConpon,
    ColorPicker,
    Tinymce
  },
  computed: {
    prizeColor() {
      return "color:" + this.form.other.btn_color + ";";
    },
    prize_name() {
      return function(num) {
        var arr1 = new Array(
          "零",
          "一",
          "二",
          "三",
          "四",
          "五",
          "六",
          "七",
          "八",
          "九"
        );
        var arr2 = new Array("", "十", "百"); //可继续追加更高位转换值
        if (!num || isNaN(num)) {
          return "零";
        }
        var english = num.toString().split("");
        var result = "";
        for (var i = 0; i < english.length; i++) {
          var des_i = english.length - 1 - i; //倒序排列设值
          result = arr2[i] + result;
          var arr1_index = english[des_i];
          result = arr1[arr1_index] + result;
        }
        //移除末尾的零
        result = result.replace(/零+$/, "");
        result = result.replace(/^一十/g, "十");
        return result;
      };
    }
  },
  methods: {
    // 添加抽奖 && 修改
    addPrize() {
      let _this = this;
      this.$refs["formRules"].validate(valid => {
        if (valid) {
          _this.save();
        }
      });
    },
    save() {
      this.form.start_time = this.prize_time[0];
      this.form.end_time = this.prize_time[1];
      this.form.config.forEach(item => {
        if (item.type == 4) {
          item.value = {
            commodity_id: item.valuelist[0].id
          };
        }
        if (item.type == 5) {
          item.value = {
            coupon_id: item.valuelist[0].id
          };
        }
      });
      let data = {
        name: this.form.prize_name,
        ...this.form
      };
      console.log(data);
      if (this.id) {
        editLotteryContent(data).then(res => {
          this.$message.success("修改成功");
          this.$router.push({
            path: "/scratch/list"
          });
        });
      } else {
        addLottery(data).then(res => {
          this.$message.success("创建成功");
          this.$router.push({
            path: "/scratch/list"
          });
        });
      }
    },
    // 获取
    getLottery(id) {
      let data = { id };
      getLotteryContent(data).then(res => {
        this.form = res.msg;
        this.prize_time = [];
        this.prize_time.push(this.form.start_time);
        this.prize_time.push(this.form.end_time);
        console.log(res);
      });
    },
    // 获取 配置
    getConfig() {
      getLotteryConfig().then(res => {
        this.setting = res.msg.configuration;
        console.log(res);
      });
    },
    // 图片上传
    getPrizeImg(data) {
      this.form.config[this.prize_index].image = data;
    },
    getPrizeBgImg(data) {
      this.form.other.prize_bg_img = data;
    },
    getPrizeBtnImg(data) {
      this.form.other.prize_btn_img = data;
    },
    getPrizeForegImg(data) {
      this.form.other.prize_foreg_img = data;
    },
    // 添加奖品数量
    removeItem(index) {
      console.log(index);
      let tabs = this.form.config;
      if (tabs.length > 1) {
        tabs.splice(index, 1);
      } else {
        return this.$message.error("奖品列表不能少于一条");
      }
    },
    addTab() {
      let tabs = this.form.config;
      let data = {
        name: "",
        image: "",
        probability: 5,
        type: 1,
        value: "",
        valuelist: [],
        number: 1,
        limit: 0
      };
      tabs.push(data);
      this.prize_index = tabs.length - 1 + "";
    },
    beforeLeave(currentName, oldName) {
      //重点，如果name是add，则什么都不触发
      if (currentName == "add") {
        this.addTab();
        return false;
      } else {
        this.currentIndex = currentName;
      }
    },


    toSelectPro(i){
      if(this.form.config[i].valuelist){
         this.selectPro=this.form.config[i].valuelist
      }else{
         this.selectPro=[]
      }

      this.showSelectPro=true
      this.$nextTick(()=>{
        this.$refs.selectproduct.initdata()
      })
    },
    toSelectCon(i){
      if(this.form.config[i].valuelist){
         this.selectCon=this.form.config[i].valuelist
      }else{
         this.selectCon=[]
      }
      this.showSelectCon=true
      this.$nextTick(()=>{
        this.$refs.selectCon.init()
      })
    },
    //关闭选择产品框
    closePro(data) {
		if(data){
			this.form.config[this.prize_index].valuelist = data;

		}
      // this.form.config[this.prize_index].image = data[0].master;
      this.showSelectPro = false;
    },
    //添加商品
    //关闭选择优惠券框
    closeCon(data) {
		if(data){
			this.form.config[this.prize_index].valuelist = data;
		}
		this.showSelectCon = false;

      console.log(data);
    }
  }
};
</script>
<style lang="scss" scoped>
.main_con {
  height: 100%;
  .gift_body {
    background-color: #ffffff;
    padding: 20px 30px;
    display: flex;
    height: 100%;
    .box {
      margin-top: 10px;
      background-color: #f4f6f8;
      border-radius: 2px;
      font-size: 14px;
      line-height: 20px;
      color: #262b30;
    }
    .right {
      flex: 1;
      margin-left: 30px;
      padding: 20px;
      border-radius: 15px;
      box-sizing: border-box;
      box-shadow: 0px 5px 10px #e8e8e8;
      overflow: auto;
      height: 100%;
      .form_box {
        /deep/.el-tabs--left .el-tabs__header.is-left {
         height: calc(100vh - 130px - 80px - 154px);
        }
        /deep/.el-tabs__nav-prev,
        .el-tabs__nav-next {
          display: none;
        }
        /deep/ .el-tabs__nav-wrap {
          padding: 0px;
        }
        /deep/.el-tabs__nav-scroll {
          overflow: auto;
        }
        .prize_img {
          width: 120px;
          height: 120px;
        }
        .block {
          width: 400px;
        }
        .box_ove {
          height: calc(100vh - 130px - 80px - 152px);
          overflow: auto;
        }
      }
      .form_button {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        margin-top: 15px;
      }
    }
    .left {
      .app_div {
        width: 410px;
        height: 785px;
        padding: 62px 28px 90px 27px;
        position: relative;
        background: url("~@/assets/images/ipbg.png") no-repeat;
        background-size: 100%;
        .app_main {
          overflow: scroll;
          height: 100%;
          z-index: 2;
          position: relative;
          background: #fff;
          &::-webkit-scrollbar {
            display: none; /* Chrome Safari */
          }
        }
        .div_bg {
          position: absolute;
          width: 100%;
          height: 100%;
          overflow: hidden;
          .phone-title {
            height: 64px;
            background: #fff;
            background-size: 100% auto;
            text-align: center;
            cursor: pointer;
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: relative;
            width: 100%;
            &.pageInfo {
              box-shadow: 0 0 2px 0 #2d8cf0;
              z-index: 1000;
              position: relative;
            }
            .page-title {
              position: absolute;
              z-index: 100;
              font-family: PingFang SC;
              font-style: normal;
              font-weight: 600;
              font-size: 18px;
              line-height: 25px;
              display: flex;
              align-items: center;
              text-align: center;
              color: #212121;
              left: 50%;
              transform: translate(-50%, 0);
              bottom: 10px;
              margin: 0;
            }

            .phone-top {
              display: flex;
              flex-direction: column;
              width: 100%;
              overflow: hidden;

              .custom-navbar img {
                position: absolute;
                right: 7px;
                width: 87px;
                height: 32px;
                bottom: 6px;
              }
            }
          }
          .bg_img {
            height: 100%;
            display: block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
          }
          .bg_t {
            width: 375px;
            position: absolute;
            margin: -7px 0px 0px -3px;
            z-index: 9;
          }
        }
        .div_content1 {
          width: 100%;
          // height: 100%;
          position: relative;
          z-index: 2;
          .content {
            width: 300px;
            margin: auto;
            // margin-top: 190px;
            background: #f4efdc;
            border-radius: 3px;
            padding: 15px 20px 20px 20px;
            position: relative;
            border-top: #ded9c8 solid 10px;
            font-family: Adobe Heiti Std;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px;
            .title {
              width: 100%;
              height: 30px;
              font-size: 12px;
              color: #bd1612;
              text-align: center;
              background: #ecd3b5;
              line-height: 30px;
              border-radius: 5px;
            }
            .scratch {
              width: 100%;
              margin: auto;
              margin-top: 5px;
              background: url("~@/assets/images/scratch_card.png") no-repeat;
              background-size: cover;
              padding: 20px 15px 20px 15px;
              .txt {
                text-align: center;
                line-height: 35px;
                color: #fff;
                font-size: 16px;
              }
              .compinents {
                position: relative;
                width: 100%;
                height: 100px;

                .compinents_bg {
                  width: 100%;
                  height: 100%;
                  display: block;
                  background: #d5d5d5;
                  font-size: 24px;
                  color: #fff;
                  text-align: center;
                  line-height: 100px;
                  letter-spacing: 20px;
                  text-indent: 20px;
                }
              }
              .compinents:before {
                content: " ";
                width: 0;
                height: 106px;
                position: absolute;
                border-left: 7px dotted #fac56a;
                left: -2px;
                top: -3px;
                z-index: 99;
              }

              .compinents::after {
                content: " ";
                width: 0;
                height: 106px;
                position: absolute;
                border-right: 7px dotted #fac56a;
                right: -2px;
                top: -3px;
                z-index: 99;
              }
            }
            .l_title {
              font-size: 12px;
              color: #bd1612;
              text-align: center;
              line-height: 35px;
            }
            .btn {
              width: 140px;
              height: 35px;
              margin: auto;
              img {
                width: 100%;
              }
            }
          }
          .content:before {
            content: "";
            position: absolute;
            width: 110%;
            height: 20px;
            background: #f4ceaa;
            left: 50%;
            transform: translate(-50%);
            top: -25px;
            border-radius: 3px;
          }
        }
      }
    }
  }
}
.product-item {
  display: flex;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
}
</style>
